<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="demo" style="height: 200px; width: 200px; border: 1px solid black"></div>
    <script>
        // 闭包指的是：有权访问另一个函数作用域的变量的函数。
        // 闭包释放
        // 请用调试查看其[[Scopes]]

        // 第一种，作为局部变量，使用即回收
        function foo() {
            const a = 1;
            return function bar() {
                console.log("a:", a)
            }
        }
        let fn = foo();
        fn(); 
        fn = null

        // 第二种，摆脱循环引用
        // function foo1() {
        //     let element = document.getElementById("demo");
        //     element.onclick = function() {
        //         console.log(element.id)
        //     }
        // }
        // 修改后：
        function foo1() {
            let element = document.getElementById("demo");
            const id = element.id;
            element.onclick = function() {
                console.log(id)
            }
            element = null;
        }

        foo1()

    </script>
</body>
</html>